<template>
  <div>
    <el-tabs>
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in comArr" :key="item.label">
        <component :is="item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import Button from '@/views/Element-plus/components/ButtonCom.vue'
import Container from '@/views/Element-plus/components/Container.vue'
import ColCom from '@/views/Element-plus/components/ColCom.vue'
import FormCom from '@/views/Element-plus/components/FormCom.vue'
import IconCom from '@/views/Element-plus/components/IconCom.vue'
import InfiniteScroll from '@/views/Element-plus/components/infiniteScroll.vue'
import Pagination from '@/views/Element-plus/components/Pagination.vue'
import TableCom from '@/views/Element-plus/components/TableCom.vue'
defineOptions({
  name: 'IndexCom',
  components: {
    Button,
    Container,
    ColCom,
    FormCom,
    IconCom,
    InfiniteScroll,
    Pagination,
    TableCom
  },
  data() {
    return {
      name: 'TestPage',
      comArr: [
        {
          label: '按钮',
          name: 'Button'
        },
        {
          label: '容器',
          name: 'Container'
        },
        {
          label: '排列',
          name: 'ColCom'
        },
        {
          label: '表单',
          name: 'FormCom'
        },
        {
          label: '图标',
          name: 'IconCom'
        },
        {
          label: '无限滚动',
          name: 'InfiniteScroll'
        },
        {
          label: '分页',
          name: 'Pagination'
        },
        {
          label: '表格',
          name: 'TableCom'
        }
      ]
    }
  }
})
</script>

<style>

</style>
